<template>
  <div class="app-container">

    <el-button type="success" style="margin-bottom: 10px;width: 120px" @click="addDialog">添加</el-button>

    <el-table
      :data="list"
      border
      fit
      highlight-current-row
    >

      <el-table-column
        type="index"
        label="序号"
        width="70"
        align="center">

      </el-table-column>

      <el-table-column label="图片" align="center" prop="pictureUrl" width="540">
        <template slot-scope="scope">
          <img class="" :src="scope.row.pictureUrl" width="340" height="200"/>
        </template>
      </el-table-column>

      <el-table-column
        prop="urlTo"
        label="图片跳转网址"
        width="508"
        align="center">

      </el-table-column>

      <el-table-column
        prop="gmtCreate"
        label="创建时间"
        width="280"
        align="center">
      </el-table-column>

      <el-table-column
        label="操作"
        width="300"
        align="center">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.bannerId)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加编辑框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >

      <el-form ref="form" :model="editForm" label-width="80px" :rules="editFormRules">

        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/oss/fileoss/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload" align="center" label="头像">
          <img :src="addForm.pictureUrl" class="" width="340" height="200">
        </el-upload>

        <el-form-item label="跳转地址" prop="phone" style="margin-bottom: 10px">
          <el-input v-model="addForm.urlTo"></el-input>
        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmDialog">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>
<script>

import banner from '@/api/wd/banner'

export default {
  data() {
    return {
      list: null,
      limit: 10,//每页记录数
      bannerQuery: {},
      imageUrl: '',
      dialogVisible: false, //是否展示编辑框
      addForm: { //添加的表单
        pictureUrl: "",
        urlTo: ""
      }
    };
  },
  created() { //页面渲染之前执行，一般调用methods定义的方法
    //调用
    this.getList()
  },
  methods: {
    getList() {
      banner.getBannerList()
        .then(response => {
          this.list = response.data.list
        })
    },

    addDialog() {
      this.dialogVisible = true //是否展示编辑框
    },

    handleAvatarSuccess(res, file) {
      this.addForm.pictureUrl = file.response.data.url
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      return isLt10M;
    },
    async confirmDialog(addObj) {
      this.dialogVisible = false;
      const res = await banner.addBanner(this.addForm)
      if (res.code == "20000") {
        this.$message({
          message: '添加成功',
          type: 'success'
        });
      }
      this.getList()
      this.addForm = {}
    },
    removeDataById(bannerId) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await banner.deleteBanner(bannerId)
        if (res.code == "20000") {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }
        this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },


  }
}
</script>
